<template>
  <div>
    <!--上传组件
        action:上传的地址
        before-upload：上传文件之前的钩子函数
        on-success：文件上传成功后的钩子函数
        file-list：上传的文件列表
        limit="picmax：最大允许上传个数
        on-exceed：文件超过个数限制时的钩子函数
        before-remove：删除文件之前的钩子函数
        data：上传时附带的额外参数，需要封装为json对象
        name：上传的文件字段名
    -->
    <el-upload
      action="/api/filesystem/upload"
      list-type="picture-card"
      :before-upload="setuploaddata"
      :headers = "headers"
      :on-success="handleSuccess"
      :file-list="fileList"
      :limit="picmax"
      :on-exceed="rejectupload"
      :before-remove="handleRemove"
      :data="uploadval"
      :name="file">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>
<script>
    import * as sysConfig from '@/../config/sysConfig';
    import * as courseApi from '../../api/course';
    import utilApi from '../../../../common/utils';
    import * as systemApi from '../../../../base/api/system';

    export default {
        data() {
            return {
                picmax: 1,//最大上传文件的数量
                courseid: '',
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [],
                uploadval: {fileTag: "course"},//上传提交的额外的数据 ，将uploadval转成key/value提交给服务器
                imgUrl: sysConfig.imgUrl
            }
        },computed: {
            headers() {
                return{
                    "Authorization": "Bearer "+utilApi.getJwt() // 直接从本地获取token就行
                }
            }
        },
        methods: {
            //超出文件上传个数提示信息
            rejectupload() {
                this.$message.error("最多上传" + this.picmax + "个图片");
            },
            //在上传前设置上传请求的数据
            setuploaddata() {


            },
            //删除图片
            handleRemove(file, fileList) {
                console.log(file);
                //调用服务端去删除课程图片信息，如果返回false，前端停止删除
                //异步调用
                return new Promise((resolve, rejct) => {
                    courseApi.deleteCoursePic(this.courseid).then(res => {
                        if (res.success) {
                            this.$message.success("删除成功")
                            //成功
                            resolve()
                        } else {
                            this.$message.error("删除失败");
                            //失败
                            rejct()
                        }
                    })
                })
            },
            //上传成功的钩子方法
            handleSuccess(response, file, fileList) {
                console.log(response);
                // alert('上传成功')
                //调用课程管理的保存图片接口，将图片信息保存到课程管理数据库course_pic中
                //从response得到新的图片文件的地址
                if (response.success) {
                    //获取上传成功后的文件访问路径
                    let fileId = response.fileSystem.fileId;
                    //调用添加课程图片的方法
                    courseApi.addCoursePic(this.courseid, fileId).then(res => {
                        if (res.success) {
                            this.$message.success("上传图片")
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }else{
                    if(response.message){
                        this.$message.error(response.message);
                    }
                }
            },
            //上传失败执行的钩子方法
            handleError(err, file, fileList) {
                if(err.message){
                    this.$message.error(err.message);
                }else{
                    this.$message.error('上传失败');
                }
                //清空文件队列
                this.fileList = []
            },
            //测试异步调用promise  有三种状态:
            //进行中pending
            //执行成功 resolve
            //执行失败 reject
            testPromise(i) {
                return new Promise((resolve, reject) => {
                    if (i < 2) {
                        //成功了
                        resolve('成功了');
                    } else {
                        //失败了
                        reject('失败了');
                    }

                })
            }
        },
        mounted() {
            //赋值课程id
            this.courseid = this.$route.params.courseid;
            //查询课程的图片信息，用于回显
            courseApi.findCoursePicList(this.courseid).then(res => {
                if (res && res.pic) {
                    //拼接FastDFS访问路径，服务器地址+文件id
                    let imgUrl = this.imgUrl + res.pic;
                    //将图片地址设置到页面
                    this.fileList.push({name: 'pic', url: imgUrl, fileId: res.pic})
                }
            })
            //测试调用promise方法，then中写的成功后的回调方法，
            //      this.testPromise(3).then(res=>{
            //          alert(res)
            //      }).catch(res=>{//catch就是执行失败的回调方法
            //          alert("失败了。。。。。")
            //          alert(res)
            //      })
        }

    }
</script>
<style>

</style>
